<template>
	<view :class="[primarySize()]">
		<view class="page-foot">
			<Footer :identity="userinfo.group_id==2?2:1" :footState="4" :num="megNum"></Footer>
		</view>
		<view class="container">
			<view class="page-head">
				<hx-navbar ref="hxnb" :config="config"></hx-navbar>
			</view>
			<image :src="iconPath('bg_profile.png')" mode="aspectFill" class="bg" v-if="primarySize()"></image>
			<view class="bg orange" v-else></view>
			<view class="pr z2 pt215 plr30 pb30">
				<company-profile ref="company" @changeRole="changeRole"
					v-if="userinfo && userinfo.group_id == 2"></company-profile>
				<user-proflie ref="personal" @changeRole="changeRole" v-else></user-proflie>
			</view>
		</view>


		<u-popup :show="code" mode="center" :safeAreaInsetBottom="false" @close="close" bgColor="transparent">
			<view class="popup">
				<image src="@/static/public/bg1.png" mode="aspectFill"></image>
				<view>长按扫码添加客服企业微信</view>
			</view>
		</u-popup>

		<change :userinfo="userinfo" :switchRole="switchRole" @close="closeSwitch"></change>

	</view>
</template>

<script>
	import change from '../../components/change/change.vue'
	import companyProfile from '../../components/company-profile/company-profile.vue'
	import userProflie from '../../components/user-proflie/user-proflie.vue'
	const app = getApp();
	export default {
		components: {
			companyProfile,
			userProflie,
			change
		},
		data() {
			return {
				config: {
					color: '#101010',
					back: false,
					maxSlot: true,
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [0, ['#FFFFFF', '#FFFFFF']],
					statusBarFontColor: ['#ffffff', '#ffffff']
				},
				megNum: 0,
				userinfo: null,
				code: false,
				switchRole: false,
				percentage: 50,
				primary: '',
			}
		},
		onShow() {
			// 直接调用父组件的方法
			if (this.$refs.personal) {
				this.$refs.personal.refreshProgress(); // 更新进度
				this.$forceUpdate()
			}
		},
		onLoad() {
			this.userinfo = this.$core.getUserinfo();
			if (this.userinfo == null) {
				this.changeRole()
			}
			if(this.userinfo){
				if (this.userinfo.group_id == 2) {
					setTimeout(() => {
						this.$refs.company.refresh();
						
					}, 100)
				} else {
					setTimeout(() => {
						this.$refs.personal.refresh();
					}, 100)
				}
			}
			uni.$on(app.globalData.Events.UserLogin, this.eventOnUserLogin, this);
			uni.$on(app.globalData.Events.UserinfoUpdate, this.eventOnUserinfoUpdate, this);
			uni.$on(app.globalData.Events.UserLogout, this.eventOnUserLogout, this);
			uni.$on(app.globalData.Events.RefreshUserCenter, this.eventRefreshUserCenter, this);

			//未读消息
			if (app.globalData.chat_config.SocketTask) {
				this.$chatIM.setMessageBadge(false)
			}
			uni.$on(app.globalData.Events.WebsocketMessageCount, this.eventWebsocketMessageCount, this);

		},
		
		onUnload() {
			uni.$off(app.globalData.Events.UserLogin, this.eventOnUserLogin, this);
			uni.$off(app.globalData.Events.UserinfoUpdate, this.eventOnUserinfoUpdate, this);
			uni.$off(app.globalData.Events.UserLogout, this.eventOnUserLogout, this);
			uni.$off(app.globalData.Events.RefreshUserCenter, this.eventRefreshUserCenter, this);

			uni.$off(app.globalData.Events.WebsocketMessageCount, this.eventWebsocketMessageCount);
		},
		onPullDownRefresh() {

			if (this.userinfo.group_id == 2) {
				this.$refs.company.refresh();
			} else {
				this.$refs.personal.refresh();
			}
			uni.stopPullDownRefresh();
		},
		methods: {
			changeRole(e) {
				this.switchRole = !this.switchRole;
			},
			close() {
				this.code = false
			},
			closeSwitch() {
				this.switchRole = false
			},
			eventOnUserLogin(userinfo) {
				this.userinfo = userinfo;
				if (userinfo.group_id == 2) {
					setTimeout(() => {
						this.$refs.company.refresh();
						this.refreshPage()
					}, 100)
				} else {
					setTimeout(() => {
					this.$refs.personal.refresh();
						this.refreshPage()
					}, 100)
				}
			},
			eventOnUserLogout(userinfo) {
				this.userinfo = null;
				this.refreshPage();
			},
			eventOnUserinfoUpdate(userinfo) {
				this.userinfo = userinfo;

				if (userinfo.group_id == 2) {
					setTimeout(() => {
						this.$refs.company.refresh();
						this.refreshPage()
					}, 100)
					
				} else {
					setTimeout(() => {
						this.$refs.personal.refresh();
						this.refreshPage()
					}, 100)
				}
			},
			eventRefreshUserCenter() {
				// if(this.userinfo.group_id == 2){
				// 	this.$refs.company.refresh();
				// }else{
				// 	this.$refs.personal.refresh();
				// }
			},
			//刷新
			refreshPage() {
				let page = this;
				let userinfo = this.userinfo;
				uni.stopPullDownRefresh();
			},
			//未读消息
			eventWebsocketMessageCount(data) {
				this.megNum = this.userinfo? app.globalData.chat_config.messageCount : 0;
				// this.$forceUpdate()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 677rpx;
		z-index: 1;

		&.orange {
			background: var(--primary);
		}
	}

	.pt215 {
		padding-top: 215rpx;
	}

	.user_img {
		width: 132rpx;
		height: 132rpx;
		border: 3rpx solid #FFFFFF;
		border-radius: 50%;
	}

	.lh66 {
		line-height: 66rpx;
	}

	.switch_nav {
		width: 165rpx;
		height: 58rpx;
		background: #FFFFFF;
		border-radius: 29rpx;
		font-size: 26rpx;
		color: var(--primary);

		image {
			width: 22rpx;
			height: 22rpx;
		}
	}

	.dot {
		position: relative;

		&::after {
			content: '';
			width: 13rpx;
			height: 13rpx;
			background: #FF5656;
			border: 1px solid #FFFFFF;
			position: absolute;
			border-radius: 50%;
			top: 8rpx;
			right: -6rpx;
		}
	}

	.mid_box {
		width: 690rpx;
		height: 203rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;
		margin-top: 30rpx;

		.ico {
			width: 56rpx;
			height: 55rpx;
		}
	}

	.box {
		width: 690rpx;

		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;
		padding: 48rpx 22rpx 48rpx 40rpx;
		margin-top: 20rpx;
	}

	.mt80 {
		margin-top: 80rpx;
	}

	.ico22 {
		width: 22rpx;
		height: 22rpx;
	}

	.popup {
		width: 645rpx;
		height: 758rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		border: 1px solid #979797;
		padding-top: 94rpx;
		text-align: center;
		font-size: 30rpx;
		color: #666666;

		image {
			width: 485rpx;
			height: 482rpx;
			margin-bottom: 55rpx;
		}
	}



	.box1 {
		width: 690rpx;
		height: 178rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 18rpx;
		padding-left: 40rpx;
		padding-right: 20rpx;
		margin-top: 20rpx;

		.ico_comp {
			width: 118rpx;
			height: 118rpx;
		}
	}
</style>